<template>
	<view>
		<view class="news" v-for="d in list" @click="showNew(d.nid)">
			<view class="title">
				{{ d.title }}
			</view>
			<view class="info">
				{{ d.username }} {{ tools.formatDate(d.lastupdate)}}
			</view>
		</view>
		<uni-load-more @clickLoadMore="loadmore" :content-text="loadContext" :status="status"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		api,
		tools
	} from '../../api/api.js'
	
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	
	onLoad(() => {
		uni.startPullDownRefresh({})
	})
	
	onPullDownRefresh(() => {
		page.value.pageNumber = 2
		query()
	})
	
	const status = ref('more')
	
	const loadmore = () => {
		page.value.pageNumber++
		if(page.value.pageNumber >= page.value.pageCount) {
			status.value = 'noMore'
			return
		}
		api.get('/crud/news', tools.concatJson(queryInfo.value, page.value), (data) => {
			status.value = 'more'
			if (data.success) {
				list.value = list.value.concat(data.data.data)
				page.value = data.data.pageBean
				if(page.value.pageNumber >= page.value.pageCount) {
					status.value = 'noMore'
				}
				return
			}
			uni.showToast({
				title: data.message,
				icon: 'fail'
			})
		})
	}
	
	const loadContext = ref({
		contentdown: "可以点一点哦（ ^ - ^ ）",
		contenttrefresh: "不能再点了...",
		contentnomore: "不要点了听不懂吗（ \ - / ）"
	})

	const queryInfo = ref({
		title: '',
		info: '',
		source: ''
	})

	const page = ref({
		pageSize: 5,
		pageNumber: 1
	})

	const list = ref([])

	const showNew = (nid) => {
		uni.navigateTo({
			url: '/pages/news/new?nid=' + nid
		})
	}

	const query = () => {
		api.get('/crud/news', tools.concatJson(queryInfo.value, page.value), (data) => {
			if (data.success) {
				list.value = data.data.data
				page.value = data.data.pageBean
				return
			}
			uni.showToast({
				title: data.message,
				icon: 'fail'
			})
		})
	}

</script>

<style>
	
	.news {
		border: 1px solid red;
		border-radius: 1rem;
		margin: 1rem;
		padding: 1rem;
	}
	
	.news .title{
		font-size: 1.3rem;
		font-weight: bold;
		color: #0000ff;
	}
	
	.news .info {
		text-align: right;
	}

</style>